<script setup lang='ts'>
import { onUnmounted } from "vue";
import useInit from "./useInit"
import useSearch from "./useSearch";
import useMarker from "./useMarker";
import { onMounted } from "vue";

const props = defineProps({
  rootId: {
    type: String,
    required: true
  }
})

// init
const {
  mapInstenceRef,
  AMapFactoryRef,
  setCenter,
  setFitView
} = useInit(props.rootId)

// search
const {
  localSearch,
  removeSearchMarker
} = useSearch(AMapFactoryRef, mapInstenceRef)

// marker operations
const {
  addMarkerToMap,
  delMarkerFromMap,
  clearMarkers
} = useMarker(mapInstenceRef, AMapFactoryRef)

defineExpose({
  localSearch,
  addMarkerToMap,
  removeSearchMarker,
  setCenter,
  setFitView,
  delMarkerFromMap,
  clearMarkers
})

onUnmounted(() => {
  mapInstenceRef?.value?.destroy();
});

onMounted(() => {

  // mapInstenceRef.value?.clearMap();

})

</script>

<template>
  <view :id='rootId' class="amap-custom__container" :class="rootId">
  </view>
  <view class="footer">
    <copyright-footer></copyright-footer>
  </view>
</template>

<style scoped lang='scss'>
@import "./amapCustom.scss";
</style>